import React, {Component} from 'react';
import { withRouter } from "react-router-dom";
import NavBarMy from "../navbar/NavBarMy";
import SearchInto from "../searchInto/SearchInto";
import { Tabs,Toast,Pagination,Icon } from "antd-mobile";
import myaxios from '../../myaxios';
import emptyProduct from '../../assets/images/empty_product.jpg';
import style from './GoodList.module.scss';

class GoodList extends Component {
    constructor(props) {
        super(props);
        this.goodListRef = React.createRef();
    }

    state = {
        tabs: [{ title: "综合" }, { title: "销量" }, { title: "价格" }],
        goods: [],
        proArr:[],
        currentPage:0,
    };
    // total=0;
    // pagenum=1;
    pagesize=10;
    isLastOne=false;
    getProductList=()=>{
        let params={};
        if(this.cid){
            params['cid']=this.cid;
        }
        if(this.query){
            params['query']=decodeURIComponent(this.query);
        }
        params['pagenum']=this.state.currentPage + Number(1);
        params['pagesize']=this.pagesize;
        myaxios.get('goods/search',{params:params}).then(res=>{
            this.flag=false;
            this.total=parseInt(res.message.total);
            this.setState({
                goods: [...this.state.goods, ...res.message.goods], // 追加数据
                currentPage:parseInt(res.message.pagenum)
            },()=>{
                if(this.state.goods.length===this.total){
                    this.isLastOne=true;
                }
            });
        }).catch((err) => {
            console.log(err);
        });
    }
    flag=false;
    handleScroll=()=>{
        let element = this.goodListRef.current;
        let clientHeight = element.clientHeight;
        let scrollHeight = element.scrollHeight;
        let scrollTop = element.scrollTop;
        if (scrollHeight - clientHeight - scrollTop <= 1) {
            if(!this.flag&&!this.isLastOne){
                this.flag=true;
                Toast.info('正在加载',1);
                this.getProductList();
            }
            if(this.isLastOne){
                Toast.info('已经是最后一条数据',1);
            }
        }
    }
    getProductList02=(a)=>{
        let params={};
        if(this.cid){
            params['cid']=this.cid;
        }
        if(this.query){
            params['query']=decodeURIComponent(this.query);
        }
        params['pagenum']=this.pagenum02?this.pagenum02 + Number(a):1;
        params['pagesize']=this.pagesize;
        myaxios.get('goods/search',{params:params}).then(res=>{
            this.total=res.message.total;
            this.pagenum02 = parseInt(res.message.pagenum);
            this.setState({
                proArr:res.message.goods,
            });
            if(this.total&&(this.pagenum02 > Math.floor(this.total/this.pagesize))){
                Toast.info('已经是最后一条数据',1);
            }
        }).catch((err) => {
            console.log(err);
        });
    }
    componentDidMount() {
        let {search} =this.props.location;
        let params = search.split('?')[1] ||'';
        let paramsArr = params.split('=');
        if(paramsArr[0]==='cid'){
            this.cid=paramsArr[1];
        }else if(paramsArr[0]==='query'){
            this.query=paramsArr[1];
        }
        this.getProductList();
        this.getProductList02();
        this.goodListRef.current.addEventListener(
            "scroll",
            this.handleScroll
        );
    }
    componentWillUnmount() {
        this.goodListRef.current.removeEventListener(
            "scroll",
            this.handleScroll
        );
    }
    handleItemClick = (goods_id) => {
        this.props.history.push("/goodDetail/" + goods_id);
    };
    render() {
        return (
            <div>
                <NavBarMy  title='商品分类' left={true}></NavBarMy>
                <SearchInto ></SearchInto>
                <Tabs
                    tabs={this.state.tabs}
                    tabBarUnderlineStyle={{ borderColor: "red" }}
                    tabBarTextStyle={{ fontWeight: "200", color: "black" }}
                >
                    <div ref={this.goodListRef} className={style.listBox}>
                        <div>{this.state.goods.map((v)=>{
                            return (<div
                                className={style.listItem}
                                key={v.goods_id}
                                onClick={()=>{this.handleItemClick(v.goods_id)}}
                            >
                                <div className={style.itemImage}><img style={{width:'100%',height:'100%'}} src={v.goods_small_logo ? v.goods_small_logo : emptyProduct} alt=""/></div>
                                <div className={style.itemInfo}>
                                    <div>{v.goods_name}</div>
                                    <div style={{color:'red',fontSize:'20px',fontWeight:600}}>￥{v.goods_price}</div>
                                </div>
                            </div>)
                        })}</div>
                    </div>
                    <div className={style.listBox}>
                        <div>{this.state.proArr.map((v)=>{
                            return (<div
                                className={style.listItem}
                                key={String(v.goods_id)+'shop'}
                            >
                                <div className={style.itemImage}><img style={{width:'100%',height:'100%'}} src={v.goods_small_logo ? v.goods_small_logo : emptyProduct} alt=""/></div>
                                <div className={style.itemInfo}>
                                    <div>{v.goods_name}</div>
                                    <div style={{color:'red',fontSize:'20px',fontWeight:600}}>￥{v.goods_price}</div>
                                </div>
                            </div>)
                        })}</div>
                        <Pagination total={this.total}
                                    className="custom-pagination-with-icon"
                                    current={this.pagenum02}
                                    locale={{
                                        prevText: (<span onClick={()=>{this.getProductList02(-1)}} className="arrow-align"><Icon  type="left" />上一步</span>),
                                        nextText: (<span onClick={()=>{this.getProductList02(1)}}  className="arrow-align">下一步<Icon  type="right" /></span>),
                                    }}
                        />
                    </div>
                    <div className={style.listBox}>价格</div>
                </Tabs>
            </div>
        );
    }
}

export default withRouter(GoodList);
